<template>
  <div class="main">
    <div
      v-for="(item, index) in list"
      :key="index"
      class="contentList"
    >
      <div :class="getContentItemClass(item)">
        <p class="money">{{ item.amount }}{{ getMoneyUnit(item) }}</p>
        <p class="desc">{{ getDescription(item) }}</p>
        <div
          v-if="item.is_recommend > 0"
          class="active"
        >推荐</div>
        <div
          v-if="item.subscript"
          class="subscript hidden"
        >{{ item.subscript }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    getContentItemClass(item) {
      if (item.product_type == 1) {
        return 'contentItem columnFlex allCenter all'
      } else if ((item.product_type > 1 && item.product_type < 9) || item.product_type == 10) {
        return 'ontentItem contentItemActive columnFlex allCenter'
      } else if (item.product_type == 9 || item.product_type == 11) {
        return 'contentItem columnFlex allCenter contentItem_'
      }
    },
    getMoneyUnit(item) {
      if (item.product_type == 1) {
        return '元'
      } else {
        return `/${item.product_name}`
      }
    },
    getDescription(item) {
      if (item.product_type == 1) {
        return `${item.coin}喵币 + ${item.free_coin}赠币`
      } else if ((item.product_type > 1 && item.product_type < 9) || item.product_type == 10) {
        return '全场剧集免费观看'
      } else if (item.product_type == 9) {
        return item.product_name
      } else if (item.product_type == 11) {
        return `解锁${item.chapter_count ? item.chapter_count : 0}集(全场可看)`
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  width: 350px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.contentList {
  position: relative;
  margin: 10px 0;
  background-color: #f5f6fa;
  border-radius: 8px;
  .all {
    .desc {
      color: #e47d00;
    }
  }
  .active {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 40px;
    height: 20px;
    background: #ef900c;
    border-radius: 11px;
    padding: 1px 4px;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .subscript {
    padding: 0 5px;
    background: linear-gradient(133deg, #ff7139 0%, #fc3f3a 100%);
    border-radius: 8px 0px 8px 0px;
    max-width: 70%;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 20px !important;
  }
}

.contentItem,
.contentItemActive {
  width: 165px;
  height: 80px;
  border-radius: 8px;
  padding: 41px 0;

  .money {
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 20px;
  }

  .desc {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 20px;
    margin-top: 5px;
  }
}

.contentItemActive {
  background-image: url('../../assets/vip_bacimage.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;

  .money {
    color: #624d3f;
  }

  .desc {
    color: #624d3f;
  }
}

.contentItem_ {
  background-image: url('../../assets/vip_bacimage.png');
}
</style>

